<template>
  <div class="order-detail-page mx-auto max-w-7xl">
    <div
      class="order-status"
      :style="{
        paddingTop: detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm' ? '56px' : '0px'
      }"
    >
      <div
        class="count-time flexbox flex-align-center flex-justify-between !w-full"
        v-if="detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm'"
      >
        <div class="triangle"></div>
        <div class="left flexbox flex-align-center">
          <img
            loading="lazy"
            class="icon"
            src="https://cd.sealmg.com/assets/img/date-count.png"
            alt="Countdown timer"
            title="Order countdown timer"
            srcset=""
          />
          <div class="num">
            <span class="text" v-if="days > 0">{{ days }}</span>
            <span class="text" v-if="days > 0">:</span>
            <span class="text" v-if="hours > 0">{{ hours }}</span>
            <span class="text" v-if="hours > 0">:</span>
            <span class="text">{{ minutes }}</span>
            <span class="text">:</span>
            <span class="text">{{ seconds }}</span>
          </div>
        </div>
        <el-button class="btn" @click="goOrderPay">{{ $t('formBtn.goPay') }}</el-button>
      </div>
      <div class="progress flexbox">
        <div class="item">
          <div class="top flexbox flex-center">
            <div class="img flexbox flex-center">
              <img
                loading="lazy"
                class="icon"
                src="https://cd.sealmg.com/assets/img/step-has.png"
                alt="Progress step completed"
                title="Order progress indicator"
                srcset=""
              />
              <!-- <div class="step">1</div> -->
            </div>
            <div class="line active"></div>
          </div>
          <div class="name">{{ $t('formItem.createOrder') }}</div>
          <div class="date">{{ detailInfo.create_time_text || '--' }}</div>
        </div>
        <div class="item">
          <div class="top flexbox flex-center">
            <div class="img flexbox fflex-center">
              <img
                loading="lazy"
                class="icon"
                src="https://cd.sealmg.com/assets/img/step-has.png"
                alt="Progress step completed"
                title="Order progress indicator"
                srcset=""
                v-if="
                  (detailInfo.order_status != 0 && detailInfo.order_status != 6) ||
                  (detailInfo.order_status == 0 && detailInfo.payment_order_status == 'awaiting_confirm')
                "
              />
              <div
                :class="[
                  'step',
                  detailInfo.order_status == 6 || (detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm')
                    ? 'active'
                    : ''
                ]"
                v-else
              >
                2
              </div>
            </div>
            <div
              :class="[
                'line',
                (detailInfo.order_status != 0 && detailInfo.order_status != 6) ||
                (detailInfo.order_status == 0 && detailInfo.payment_order_status == 'awaiting_confirm')
                  ? 'active'
                  : ''
              ]"
            ></div>
          </div>
          <div class="name">{{ $t('formBtn.pay') }}</div>
          <div
            class="date"
            v-if="
              (detailInfo.order_status != 0 && detailInfo.order_status != 6) ||
              (detailInfo.order_status == 0 && detailInfo.payment_order_status == 'awaiting_confirm')
            "
          >
            {{ detailInfo.pay_time_text || '--' }}
          </div>
          <div
            class="date"
            v-if="detailInfo.order_status == 6 || (detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm')"
          >
            {{ detailInfo.order_status_text || '--' }}
          </div>
        </div>
        <div class="item">
          <!-- :0=等待付款,1=等待发货,2=处理中,3=发货中,4=已完成,5=已退款,6=取消订单 -->
          <div class="top flexbox flex-center">
            <div class="img flexbox flex-center">
              <img
                loading="lazy"
                class="icon"
                v-if="detailInfo.order_status == 4"
                src="https://cd.sealmg.com/assets/img/step-has.png"
                alt="Progress step completed"
                srcset=""
              />
              <div :class="['step', detailInfo.order_status == 1 || detailInfo.order_status == 3 ? 'active' : '']" v-else>3</div>
            </div>
            <div :class="['line', detailInfo.order_status == 4 ? 'active' : '']"></div>
          </div>
          <div class="name">{{ $t('formItem.deliverGoods') }}</div>
          <div class="date" v-if="detailInfo.order_status == 1 || detailInfo.order_status == 3">
            {{ detailInfo.order_status_text || '--' }}
          </div>
          <div class="date" v-if="detailInfo.order_status == 4">
            {{ detailInfo.delivery_time_text || '--' }}
          </div>
        </div>
        <div class="item">
          <div class="top flexbox flex-center">
            <div class="img flexbox flex-center">
              <img
                loading="lazy"
                class="icon"
                src="https://cd.sealmg.com/assets/img/step-has.png"
                alt="Progress step completed"
                srcset=""
                v-if="detailInfo.order_status == 4"
              />
              <div :class="['step', detailInfo.order_status == 4 ? 'active' : '']" v-else>4</div>
            </div>
            <div class="line"></div>
          </div>
          <div class="name">{{ $t('status.completed') }}</div>
          <div class="date" v-if="detailInfo.order_status == 4">
            {{ detailInfo.complete_time_text || '--' }}
          </div>
        </div>
      </div>
    </div>
    <div class="mode">
      <div class="title flexbox flex-align-center">
        <span class="text">{{ $t('orderPage.orderDetail') }}</span>
      </div>
    </div>
    <div class="cont flexbox">
      <div class="left">
        <nuxt-link
          class="goods flexbox flex-align-center"
          v-if="detailInfo.orderGoods && detailInfo.orderGoods.goods_info"
          :to="
            this.detailInfo.orderGoods?.goods_info?.type !== 3
              ? localePath(`/product/${this.detailInfo.orderGoods.goods_info.code}`)
              : $route.fullPath
          "
        >
          <img
            loading="lazy"
            class="img object-cover"
            v-lazy="$globalFn.imgPrefixUrl(detailInfo.orderGoods.goods_info.image, 'goods_thumb_1_1')"
            :alt="detailInfo.orderGoods.goods_info.image"
            srcset=""
          />
          <div class="base">
            <div class="name one-line">
              {{ detailInfo.orderGoods.goods_info.goods_name || '--' }}
            </div>
            <div class="desc one-line">
              {{ detailInfo.orderGoods.goods_info.sku ? detailInfo.orderGoods.goods_info.sku.title : '--' }}
            </div>
            <span class="rate" v-if="detailInfo.orderGoods.goods_info.sku && detailInfo.orderGoods.goods_info.sku.discount > 0"
              >-{{ detailInfo.orderGoods.goods_info.sku.discount }}%</span
            >
          </div>
        </nuxt-link>
        <div class="item-mode">
          <div class="item-row flexbox flex-align-center flex-justify-between">
            <span class="label">{{ $t('userInfo.orderNo') }}</span>
            <span class="text">{{ detailInfo.orderGoods && detailInfo.orderGoods.order_no ? detailInfo.orderGoods.order_no : '--' }}</span>
          </div>
          <div class="item-row flexbox flex-align-center flex-justify-between">
            <span class="label">{{ $t('orderPage.payStatus') }}</span>
            <!-- :0=等待付款,1=等待发货,2=处理中,3=发货中,4=已完成,5=已退款,6=取消订单 -->
            <span class="text" v-if="detailInfo.orderGoods">{{ detailInfo.orderGoods.order_status_text }}</span>
          </div>
          <div class="item-row flexbox flex-align-center flex-justify-between">
            <span class="label">{{ $t('orderPage.createTime') }}</span>
            <span class="text">{{ detailInfo.create_time_text || '--' }}</span>
          </div>
          <div class="item-row item-num flexbox flex-align-center flex-justify-between">
            <span class="label">{{ $t('formItem.productNum') }}</span>
            <span class="text">x{{ (detailInfo.orderGoods && detailInfo.orderGoods.total_num) || 0 }}</span>
          </div>
          <div class="item-row flexbox flex-align-center flex-justify-between">
            <span class="label">{{ $t('formItem.total1') }}</span>
            <span class="text"
              >{{ (detailInfo.orderGoods && detailInfo.orderGoods.currency_symbol) || ''
              }}{{ (detailInfo.orderGoods && detailInfo.orderGoods.payable_price) || 0 }}</span
            >
          </div>
        </div>
      </div>
      <div class="right">
        <div class="progress flexbox">
          <div class="item">
            <div class="top flexbox flex-center">
              <div class="img flexbox flex-center">
                <img loading="lazy" class="icon" src="https://cd.sealmg.com/assets/img/step-has.png" alt="Progress step completed" srcset="" />
                <!-- <div class="step">1</div> -->
              </div>
              <div class="line active"></div>
            </div>
            <div class="name">{{ $t('formItem.createOrder') }}</div>
            <div class="date">{{ detailInfo.create_time_text || '--' }}</div>
          </div>
          <div class="item">
            <div class="top flexbox flex-center">
              <div class="img flexbox fflex-center">
                <img
                  loading="lazy"
                  class="icon"
                  src="https://cd.sealmg.com/assets/img/step-has.png"
                  alt="Progress step completed"
                  srcset=""
                  v-if="
                    (detailInfo.order_status != 0 && detailInfo.order_status != 6) ||
                    (detailInfo.order_status == 0 && detailInfo.payment_order_status == 'awaiting_confirm')
                  "
                />
                <div
                  :class="[
                    'step',
                    detailInfo.order_status == 6 || (detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm')
                      ? 'active'
                      : ''
                  ]"
                  v-else
                >
                  2
                </div>
              </div>
              <div
                :class="[
                  'line',
                  (detailInfo.order_status != 0 && detailInfo.order_status != 6) ||
                  (detailInfo.order_status == 0 && detailInfo.payment_order_status == 'awaiting_confirm')
                    ? 'active'
                    : ''
                ]"
              ></div>
            </div>
            <div class="name">{{ $t('formBtn.pay') }}</div>
            <div
              class="date"
              v-if="
                (detailInfo.order_status != 0 && detailInfo.order_status != 6) ||
                (detailInfo.order_status == 0 && detailInfo.payment_order_status == 'awaiting_confirm')
              "
            >
              {{ detailInfo.pay_time_text || '--' }}
            </div>
            <div
              class="date"
              v-if="detailInfo.order_status == 6 || (detailInfo.order_status == 0 && detailInfo.payment_order_status != 'awaiting_confirm')"
            >
              {{ detailInfo.order_status_text || '--' }}
            </div>
          </div>
          <div class="item">
            <!-- :0=等待付款,1=等待发货,2=处理中,3=发货中,4=已完成,5=已退款,6=取消订单 -->
            <div class="top flexbox flex-center">
              <div class="img flexbox flex-center">
                <img
                  loading="lazy"
                  class="icon"
                  v-if="detailInfo.order_status == 4"
                  src="https://cd.sealmg.com/assets/img/step-has.png"
                  alt=""
                  srcset=""
                />
                <div :class="['step', detailInfo.order_status == 1 || detailInfo.order_status == 3 ? 'active' : '']" v-else>3</div>
              </div>
              <div :class="['line', detailInfo.order_status == 4 ? 'active' : '']"></div>
            </div>
            <div class="name">{{ $t('formItem.deliverGoods') }}</div>
            <div class="date" v-if="detailInfo.order_status == 1 || detailInfo.order_status == 3">
              {{ detailInfo.order_status_text || '--' }}
            </div>
            <div class="date" v-if="detailInfo.order_status == 4">
              {{ detailInfo.delivery_time_text || '--' }}
            </div>
          </div>
          <div class="item">
            <div class="top flexbox flex-center">
              <div class="img flexbox flex-center">
                <img
                  loading="lazy"
                  class="icon"
                  src="https://cd.sealmg.com/assets/img/step-has.png"
                  alt="Progress step completed"
                  srcset=""
                  v-if="detailInfo.order_status == 4"
                />
                <div :class="['step', detailInfo.order_status == 4 ? 'active' : '']" v-else>4</div>
              </div>
              <div class="line"></div>
            </div>
            <div class="name">{{ $t('status.completed') }}</div>
            <div class="date" v-if="detailInfo.order_status == 4">
              {{ detailInfo.complete_time_text || '--' }}
            </div>
          </div>
        </div>
        <div class="count-time flexbox flex-align-center flex-justify-between" v-if="detailInfo.order_status == 0">
          <div class="triangle"></div>
          <div class="left flexbox flex-align-center">
            <img
              loading="lazy"
              class="icon"
              src="https://cd.sealmg.com/assets/img/date-count.png"
              alt="Countdown timer"
              title="Order countdown timer"
              srcset=""
            />
            <div class="num">
              <span class="text" v-if="days > 0">{{ days }}:</span>
              <span class="text" v-if="days > 0">:</span>
              <span class="text" v-if="hours > 0">{{ hours }}</span>
              <span class="text" v-if="hours > 0">:</span>
              <span class="text">{{ minutes }}</span>
              <span class="text">:</span>
              <span class="text">{{ seconds }}</span>
            </div>
          </div>
          <el-button class="btn" @click="goOrderPay">{{ $t('formBtn.goPay') }}</el-button>
        </div>
        <div class="card">
          <div class="card-item">
            <div class="title">{{ $t('orderPage.orderInfo') }}</div>
            <div class="cont cont-goods flexbox flex-align-center flex-justify-between">
              <span class="name two-line">
                {{ detailInfo.orderGoods && detailInfo.orderGoods.goods_info ? detailInfo.orderGoods.goods_info.goods_name : '--' }}
              </span>
              <!-- {{ detailInfo.orderGoods.type }} -->
              <span class="no" v-if="detailInfo?.orderGoods?.type == 1">{{
                detailInfo.orderGoods && detailInfo.orderGoods.order_no ? detailInfo.orderGoods.order_no : '--'
              }}</span>
              <div v-if="detailInfo?.orderGoods?.type == 2">{{ Object.values(detailInfo.orderGoods.user_ext).at(0) }}</div>
            </div>
          </div>
          <div class="card-item" v-if="detailInfo.comment">
            <div class="title">{{ $t('orderPage.ratingEvaluation') }}</div>
            <div class="cont cont-evaluate">
              <div class="top flexbox flex-justify-between">
                <div class="user flexbox flex-align-center">
                  <img loading="lazy" class="avator" v-lazy="$globalFn.imgPrefixUrl(detailInfo.comment.avatar)" :alt="detailInfo.comment.avatar" />
                  <div class="info">
                    <div class="name">
                      {{ detailInfo.comment.nickname || '--' }}
                    </div>
                    <div class="star flexbox flex-align-center" v-if="detailInfo.comment.score">
                      <div v-for="num in 5" :key="num">
                        <img
                          loading="lazy"
                          class="icon"
                          v-if="detailInfo.comment.score < num"
                          src="https://cd.sealmg.com/assets/img/star-gray.png"
                          alt="https://cd.sealmg.com/assets/img/star-gray.png"
                          srcset=""
                        />
                        <img
                          loading="lazy"
                          class="icon"
                          v-else
                          :key="item"
                          src="https://cd.sealmg.com/assets/img/star.png"
                          alt="https://cd.sealmg.com/assets/img/star.png"
                          srcset=""
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <span class="date">{{ detailInfo.comment.create_time_text || '--' }}</span>
              </div>
              <div class="text">{{ detailInfo.comment.content }}</div>
            </div>
            <div class="cont evaluate-input" v-if="!detailInfo.comment.comment_id">
              <div class="set-star flexbox flex-align-center">
                <span class="label">{{ $t('orderPage.score') }}：</span>
                <div class="star-list flexbox flex-align-center">
                  <div class="star-item" v-for="item in starList" :key="item.id" @click="setEvaluateNum(item)">
                    <img
                      loading="lazy"
                      class="star-img"
                      v-if="!item.select"
                      src="https://cd.sealmg.com/assets/img/star-gray.png"
                      alt="https://cd.sealmg.com/assets/img/star-gray.png"
                      srcset=""
                    />
                    <img
                      loading="lazy"
                      class="star-img"
                      v-if="item.select"
                      src="https://cd.sealmg.com/assets/img/star.png"
                      alt="https://cd.sealmg.com/assets/img/star.png"
                      srcset=""
                    />
                    <!-- <img class="star-img" v-if="item.ishalf==0.5" src="https://cd.sealmg.com/assets/img/star-half.png" alt="" srcset=""> -->
                  </div>
                </div>
              </div>
              <div class="input-text">
                <el-input class="input" type="textarea" v-model="evaluateText" :placeholder="$t('formPlaceholder.input')"></el-input>
              </div>
              <div class="handle flexbox flex-align-center flex-justify-end">
                <el-button class="theme-btn" :disabled="evaluateNum && evaluateText ? false : true" @click="createEvaluate">{{
                  $t('formBtn.publish')
                }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'orderDetail',
    key(route) {
      return route.fullPath
    },
    data: function () {
      return {
        detailId: '',
        evaluateNum: 0,
        evaluateText: '',
        starList: [
          { select: false, ishalf: 0, id: 0 },
          { select: false, ishalf: 0, id: 1 },
          { select: false, ishalf: 0, id: 2 },
          { select: false, ishalf: 0, id: 3 },
          { select: false, ishalf: 0, id: 4 }
        ],
        detailInfo: {},
        endTime: 0, // 结束时间的时间戳
        currentTime: Date.now(), // 当前时间的时间戳
        countdownInterval: null,
        formattedTime: '',
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      }
    },
    created() {
      let query = this.$route.query
      if (query.no) {
        this.detailId = query.no
        this.getOrderDetail()
      }
    },
    beforeDestroy() {
      clearInterval(this.countdownInterval)
    },
    methods: {
      startCountdown() {
        this.countdownInterval = setInterval(() => {
          this.currentTime += 1000
          const timeRemaining = this.endTime - this.currentTime
          if (timeRemaining <= 0) {
            clearInterval(this.countdownInterval)
            this.detailInfo.order_status = 6
            //this.formattedTime = "已结束";
            this.getOrderDetail()
          } else {
            this.updateFormattedTime(timeRemaining)
          }
        }, 1000)
      },
      updateFormattedTime(timeRemaining) {
        const seconds = Math.floor((timeRemaining / 1000) % 60)
        const minutes = Math.floor((timeRemaining / 1000 / 60) % 60)
        const hours = Math.floor((timeRemaining / (1000 * 60 * 60)) % 24)
        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24))
        this.days = String(days).padStart(2, '0')
        this.hours = String(hours).padStart(2, '0')
        this.minutes = String(minutes).padStart(2, '0')
        this.seconds = String(seconds).padStart(2, '0')
        //this.formattedTime = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
      },
      async getOrderDetail() {
        let res = await this.$axios.get(`/api/order/orderDetail?id=${this.detailId}`)
        this.detailInfo = res || {}
        if (this.detailInfo.order_status == 0 && this.detailInfo.payment_order_status != 'awaiting_confirm') {
          this.endTime = this.detailInfo.expire_time * 1000
          this.startCountdown()
        }
      },
      setEvaluateNum(item) {
        item.select = item.select ? false : true
        this.evaluateNum = item.select ? item.id + 1 : 0
        this.starList.map(item1 => {
          if (item1.id > item.id) {
            item1.select = false
            item1.ishalf = 0
          } else if (item1.id <= item.id) {
            item1.select = item.select
            item1.ishalf = 1
          }
        })
        //item.select=true
        // this.starList.map(item1=>{
        //   if(item1.id>item.id){
        //     item1.select=false
        //     item1.ishalf=0
        //   }else if(item1.id<=item.id){
        //     item1.select=true
        //     item1.ishalf=1
        //   }
        // })
        // if(item.ishalf==1){
        //   item.ishalf=0
        //   item.select=false
        //   this.evaluateNum=item.id
        //   return
        // }
        // if(item.ishalf==0.5){
        //   item.ishalf=1
        //   this.evaluateNum=item.id+1
        //   return
        // }
        // if(item.ishalf==0){
        //   item.ishalf=0.5
        //   this.evaluateNum=item.id+0.5
        // }
      },
      createEvaluate() {
        if (this.detailInfo.orderGoods && this.detailInfo.orderGoods.goods_id && this.evaluateNum && this.evaluateText) {
          let obj = {
            order_goods_id: this.detailInfo.orderGoods.order_goods_id,
            score: this.evaluateNum,
            content: this.evaluateText
          }
          this.$axios.post(`/api/order/comment`, obj).then(res => {
            this.getOrderDetail()
          })
        }
      },
      goOrderPay() {
        //detailInfo.orderGoods.order_no
        this.$router.push({
          path: this.localePath('/order/pay'),
          query: {
            no: this.detailInfo.order_no
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .progress {
    .item {
      padding: 24px 0;
      text-align: center;
      width: 25%;
      .top {
        position: relative;
        width: 100%;
        height: 42px;
        .img {
          width: 42px;
          height: 42px;
          .icon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
          }
          .step {
            width: 38px;
            height: 38px;
            line-height: 38px;
            border-radius: 50%;
            font-weight: 600;
            font-size: 20px;
            color: @color-ff;
            text-align: center;
            background: #d6d6d6;
          }
          .step.active {
            background: @theme-color;
          }
        }
        .line {
          position: absolute;
          top: 50%;
          right: -70px;
          width: 140px;
          height: 1px;
          z-index: 1;
          transform: translateY(-50%);
          background: @color-e5;
          width: 140px;
          border: 2px solid @color-e5;
        }
        .line.active {
          background: @theme-color;
          border: 2px solid @theme-color;
        }
      }
      .name {
        margin-top: 12px;
        font-weight: 500;
        font-size: 14px;
        color: @font-color-14;
      }
      .date {
        font-family: HelveticaNeue;
        font-size: 12px;
        color: @font-color-99;
      }
    }
    .item:last-child {
      .top {
        .line {
          display: none;
          background: transparent;
        }
      }
    }
  }
  .count-time {
    position: relative;
    box-sizing: border-box;
    padding: 0 32px;
    width: 746px;
    height: 80px;
    margin: 0 auto;
    background: #ff7350;
    border-radius: 16px;
    .triangle {
      position: absolute;
      left: 265px;
      top: -8px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 16px solid #ff7350;
    }
    .left {
      .icon {
        width: 34px;
        height: 34px;
      }
      .num {
        margin-left: 14px;
        font-family: HelveticaNeue, HelveticaNeue;
        font-weight: bold;
        font-size: 32px;
        color: @color-ff;
      }
    }
    .btn {
      box-sizing: border-box;
      padding: 0 12px;
      // width: 66px;
      height: 35px;
      line-height: 35px;
      font-weight: 500;
      font-size: 14px;
      color: #ff7350;
      text-align: center;
      font-weight: 500;
      font-size: 14px;
      color: #ff7350;
      background: @color-ff;
      border-radius: 16px;
      border: none;
    }
  }
  .order-detail-page {
    .mode {
      box-sizing: border-box;
      margin-top: 20px;
      padding: 20px 24px 11px 24px;
      .title {
        padding-bottom: 8px;
        border-bottom: @border-1-e5;
        .text {
          font-weight: 500;
          font-size: 22px;
          color: @font-color-14;
        }
        .more {
          .more-text {
            font-size: 16px;
            color: @font-color-99;
          }
          .icon {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    .cont {
      margin-top: 8px;
      .left {
        width: 387px;
        .goods {
          padding: 20px 24px;
          cursor: pointer;
          .img {
            width: 88px;
            height: 88px;
            border-radius: 16px;
          }
          .base {
            margin-left: 16px;
            .name {
              width: 230px;
              font-weight: 500;
              font-size: 16px;
              color: @font-color-26;
            }
            .desc {
              width: 230px;
              margin-bottom: 6px;
              font-size: 12px;
              color: @font-color-66;
            }
            .rate {
              padding: 3px 8px;
              background: @input-focus-bg;
              border-radius: 7px;
              font-weight: 600;
              font-size: 14px;
              color: @theme-color;
            }
          }
        }
        .item-mode {
          margin-top: 20px;
          padding: 20px 28px;
          .item-row {
            margin-bottom: 14px;
            font-weight: 500;
            font-size: 14px;
            .label {
              color: @font-color-66;
            }
            .text {
              color: @font-color-26;
            }
            .line {
              width: 100%;
              height: 1px;
              margin-bottom: 14px;
              background: @color-f0;
            }
          }
          .item-num {
            padding-top: 14px;
            border-top: @border-1-fo;
          }
          .item-row:last-child {
            margin-bottom: 0;
          }
        }
      }
      .right {
        margin-left: 20px;
        width: 793px;
        .card {
          padding: 20px 24px;
        }
        .card-item {
          margin-bottom: 32px;
          .title {
            padding: 14px 20px;
            font-weight: 500;
            font-size: 14px;
            color: @font-color-66;
            background: @color-f7;
            border-radius: 16px 16px 0px 0px;
          }
          .cont {
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 0px 0px 16px 16px;
          }
          .cont-goods {
            padding: 40px 20px;
            font-weight: 500;
            font-size: 14px;
            .name {
              width: 500px;
              color: @font-color-66;
            }
            .no {
              color: @font-color-26;
            }
          }
          .cont-evaluate {
            padding: 24px 20px;
            .top {
              .user {
                .avator {
                  width: 36px;
                  height: 36px;
                  border-radius: 50%;
                }
                .info {
                  margin-left: 8px;
                  .name {
                    font-weight: 500;
                    font-size: 14px;
                    color: @font-color-26;
                  }
                  .star {
                    margin-top: 4px;
                    .icon {
                      width: 12px;
                      height: 12px;
                      margin-right: 4px;
                    }
                  }
                }
              }
              .date {
                font-weight: 500;
                font-size: 14px;
                color: @font-color-99;
              }
            }
            .text {
              margin-top: 12px;
              width: 325px;
              font-size: 12px;
              color: @font-color-26;
            }
          }
          .evaluate-input {
            padding: 16px;
            .set-star {
              padding-bottom: 12px;
              border-bottom: @border-1-fo;
              .label {
                font-weight: 500;
                font-size: 14px;
                color: @font-color-66;
              }
              .star-list {
                .star-item {
                  margin-left: 8px;
                  .star-img {
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                  }
                }
              }
            }
            .input-text {
              margin-top: 12px;
              .input {
                /deep/ .el-textarea__inner {
                  padding: 0;
                  border: none;
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-26;
                }
              }
            }
            .handle {
              margin-top: 16px;
              .theme-btn {
                box-sizing: border-box;
                padding: 0 15px;
                width: auto;
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                border-radius: 16px;
              }
            }
          }
        }
        .card-item:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  .order-status {
    display: none;
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .progress {
      .item {
        .top {
          .line {
            height: 1px;
            border: 1px solid @color-e5;
          }
          .line.active {
            border: 1px solid @theme-color;
          }
        }
      }
    }
    .order-status {
      display: block;
      .count-time {
        position: fixed;
        top: 88px;
        z-index: 6;
        box-sizing: border-box;
        padding: 0 16px;
        width: 768px;
        height: 56px;
        margin: 0 auto;
        background: #ff7350;
        border-radius: 0px;
        .triangle {
          display: none;
        }
        .left {
          .icon {
            width: 24px;
            height: 24px;
          }
          .num {
            margin-left: 8px;
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: bold;
            font-size: 20px;
            color: @color-ff;
          }
        }
        .btn {
          box-sizing: border-box;
          padding: 0 18px;
          width: auto;
          height: 32px;
          line-height: 32px;
          color: #ff7350;
          text-align: center;
          font-weight: 500;
          font-size: 14px;
          color: @theme-color;
          background: @color-ff;
          border-radius: 24px;
          border: none;
        }
      }
      .progress {
        margin-top: 8px;
        .item {
          padding: 8px 0;
          text-align: center;
          width: 25%;
          .top {
            position: relative;
            width: 100%;
            height: 24px;
            .img {
              width: 24px;
              height: 24px;
              .icon {
                width: 24px;
                height: 24px;
                border-radius: 50%;
              }
              .step {
                width: 24px;
                height: 24px;
                line-height: 24px;
                border-radius: 50%;
                font-weight: 600;
                font-size: 14px;
                color: @color-ff;
                text-align: center;
                background: #d6d6d6;
              }
              .step.active {
                background: @theme-color;
              }
            }
            .line {
              position: absolute;
              top: 50%;
              width: 140px;
              height: 2px;
              z-index: 1;
              transform: translateY(-50%);
              background: @color-e5;
            }
            .line.active {
              background: @theme-color;
            }
          }
          .name {
            margin-top: 8px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-14;
          }
          .date {
            width: 69px;
            margin: 0 auto;
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-size: 10px;
            color: @font-color-99;
          }
        }
        .item:last-child {
          .top {
            .line {
              display: none;
              background: transparent;
            }
          }
        }
      }
    }
    .order-detail-page {
      .mode {
        display: none;
      }
      .cont {
        display: block;
        margin-top: 0px;
        .left {
          width: 100%;
          .goods {
            padding: 20px 16px;
            .img {
              width: 72px;
              height: 72px;
              border-radius: 10px;
              cursor: pointer;
            }
            .base {
              margin-left: 12px;
              .name {
                width: 250px;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-14;
              }
              .desc {
                width: 250px;
                margin-bottom: 5px;
                font-size: 12px;
                color: @font-color-99;
              }
              .rate {
                padding: 0px 4px;
                line-height: 15px;
                background: @input-focus-bg;
                border-radius: 2px;
                font-weight: 600;
                font-size: 10px;
                color: @theme-color;
              }
            }
          }
          .item-mode {
            margin-top: 16px;
            padding: 0 16px;
            .item-row {
              margin-bottom: 16px;
              font-weight: 500;
              font-size: 12px;
              .label {
                color: @font-color-99;
              }
              .text {
                color: @font-color-14;
              }
            }
            .item-num {
              border-top: none;
            }
            .item-row:last-child {
              margin-bottom: 0;
              padding-bottom: 20px;
              border-bottom: @border-1-fo;
            }
          }
        }
        .right {
          margin-left: 0px;
          width: 100%;
          padding-bottom: 32px;
          .progress {
            display: none;
          }
          .count-time {
            display: none;
          }
          .card {
            margin-top: 32px;
            padding: 0 16px;
          }
          .card-item {
            padding: 0px;
            margin-bottom: 16px;
            .title {
              padding: 12px;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
              background: @color-f7;
              border-radius: 12px 12px 0px 0px;
            }
            .cont {
              background: @color-ff;
              box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
              border-radius: 0px 0px 12px 12px;
            }
            .cont-goods {
              padding: 26px 12px;
              font-weight: 500;
              font-size: 12px;
              .name {
                width: 100%;
                color: @font-color-99;
              }
              .no {
                color: @font-color-14;
              }
            }
            .cont-evaluate {
              padding: 12px;
              .top {
                .user {
                  .avator {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                  }
                  .info {
                    margin-left: 8px;
                    .name {
                      font-weight: 500;
                      font-size: 14px;
                      color: @font-color-26;
                    }
                    .star {
                      margin-top: 4px;
                      .icon {
                        width: 12px;
                        height: 12px;
                        margin-right: 4px;
                      }
                    }
                  }
                }
                .date {
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-99;
                }
              }
              .text {
                margin-top: 12px;
                width: 325px;
                font-size: 12px;
                color: @font-color-26;
              }
            }
            .evaluate-input {
              padding: 12px;
              .set-star {
                padding-bottom: 16px;
                border-bottom: none;
                .label {
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-99;
                }
                .star-list {
                  .star-item {
                    margin-left: 8px;
                    .star-img {
                      width: 20px;
                      height: 20px;
                      cursor: pointer;
                    }
                  }
                }
              }
              .input-text {
                margin-top: 0px;
                .input {
                  /deep/ .el-textarea__inner {
                    padding: 0;
                    max-height: 62px;
                    min-height: 62px;
                    border: none;
                    font-weight: 500;
                    font-size: 14px;
                    color: @font-color-26;
                  }
                }
              }
              .handle {
                margin-top: 16px;
                .theme-btn {
                  padding: 0 24px;
                  width: auto;
                  height: 32px;
                  line-height: 32px;
                  font-size: 12px;
                  border-radius: 24px;
                }
              }
            }
          }
          .card-item:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .progress {
      .item {
        .top {
          .line {
            height: 1px;
            border: 1px solid @color-e5;
          }
          .line.active {
            border: 1px solid @theme-color;
          }
        }
      }
    }
    .order-status {
      display: block;
      .count-time {
        position: fixed;
        top: 88px;
        z-index: 6;
        box-sizing: border-box;
        padding: 0 16px;
        width: 375px;
        height: 56px;
        margin: 0 auto;
        background: #ff7350;
        border-radius: 0px;
        .triangle {
          display: none;
        }
        .left {
          .icon {
            width: 24px;
            height: 24px;
          }
          .num {
            margin-left: 8px;
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: bold;
            font-size: 20px;
            color: @color-ff;
          }
        }
        .btn {
          box-sizing: border-box;
          padding: 0 18px;
          width: auto;
          height: 32px;
          line-height: 32px;
          color: #ff7350;
          text-align: center;
          font-weight: 500;
          font-size: 14px;
          color: @theme-color;
          background: @color-ff;
          border-radius: 24px;
          border: none;
        }
      }
      .progress {
        margin-top: 8px;
        .item {
          padding: 8px 0;
          text-align: center;
          width: 25%;
          .top {
            position: relative;
            width: 100%;
            height: 24px;
            .img {
              width: 24px;
              height: 24px;
              .icon {
                width: 24px;
                height: 24px;
                border-radius: 50%;
              }
              .step {
                width: 24px;
                height: 24px;
                line-height: 24px;
                border-radius: 50%;
                font-weight: 600;
                font-size: 14px;
                color: @color-ff;
                text-align: center;
                background: #d6d6d6;
              }
              .step.active {
                background: @theme-color;
              }
            }
            .line {
              position: absolute;
              top: 50%;
              right: -26.5px;
              width: 53px;
              height: 2px;
              z-index: 1;
              transform: translateY(-50%);
              background: @color-e5;
            }
            .line.active {
              background: @theme-color;
            }
          }
          .name {
            margin-top: 8px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-14;
          }
          .date {
            width: 69px;
            margin: 0 auto;
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-size: 10px;
            color: @font-color-99;
          }
        }
        .item:last-child {
          .top {
            .line {
              display: none;
              background: transparent;
            }
          }
        }
      }
    }
    .order-detail-page {
      .mode {
        display: none;
      }
      .cont {
        display: block;
        margin-top: 0px;
        .left {
          width: 100%;
          .goods {
            padding: 20px 16px;
            .img {
              width: 72px;
              height: 72px;
              border-radius: 10px;
              cursor: pointer;
            }
            .base {
              margin-left: 12px;
              .name {
                width: 250px;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-14;
              }
              .desc {
                width: 250px;
                margin-bottom: 5px;
                font-size: 12px;
                color: @font-color-99;
              }
              .rate {
                padding: 0px 4px;
                line-height: 15px;
                background: @input-focus-bg;
                border-radius: 2px;
                font-weight: 600;
                font-size: 10px;
                color: @theme-color;
              }
            }
          }
          .item-mode {
            margin-top: 16px;
            padding: 0 16px;
            .item-row {
              margin-bottom: 16px;
              font-weight: 500;
              font-size: 12px;
              .label {
                color: @font-color-99;
              }
              .text {
                color: @font-color-14;
              }
            }
            .item-num {
              border-top: none;
            }
            .item-row:last-child {
              margin-bottom: 0;
              padding-bottom: 20px;
              border-bottom: @border-1-fo;
            }
          }
        }
        .right {
          margin-left: 0px;
          width: 100%;
          padding-bottom: 32px;
          .progress {
            display: none;
          }
          .count-time {
            display: none;
          }
          .card {
            margin-top: 32px;
            padding: 0 16px;
          }
          .card-item {
            padding: 0px;
            margin-bottom: 16px;
            .title {
              padding: 12px;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
              background: @color-f7;
              border-radius: 12px 12px 0px 0px;
            }
            .cont {
              background: @color-ff;
              box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
              border-radius: 0px 0px 12px 12px;
            }
            .cont-goods {
              padding: 26px 12px;
              font-weight: 500;
              font-size: 12px;
              .name {
                width: 100%;
                color: @font-color-99;
              }
              .no {
                color: @font-color-14;
              }
            }
            .cont-evaluate {
              padding: 12px;
              .top {
                .user {
                  .avator {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                  }
                  .info {
                    margin-left: 8px;
                    .name {
                      font-weight: 500;
                      font-size: 14px;
                      color: @font-color-26;
                    }
                    .star {
                      margin-top: 4px;
                      .icon {
                        width: 12px;
                        height: 12px;
                        margin-right: 4px;
                      }
                    }
                  }
                }
                .date {
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-99;
                }
              }
              .text {
                margin-top: 12px;
                width: 325px;
                font-size: 12px;
                color: @font-color-26;
              }
            }
            .evaluate-input {
              padding: 12px;
              .set-star {
                padding-bottom: 16px;
                border-bottom: none;
                .label {
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-99;
                }
                .star-list {
                  .star-item {
                    margin-left: 8px;
                    .star-img {
                      width: 20px;
                      height: 20px;
                      cursor: pointer;
                    }
                  }
                }
              }
              .input-text {
                margin-top: 0px;
                .input {
                  /deep/ .el-textarea__inner {
                    padding: 0;
                    max-height: 62px;
                    min-height: 62px;
                    border: none;
                    font-weight: 500;
                    font-size: 14px;
                    color: @font-color-26;
                  }
                }
              }
              .handle {
                margin-top: 16px;
                .theme-btn {
                  padding: 0 24px;
                  width: auto;
                  height: 32px;
                  line-height: 32px;
                  font-size: 12px;
                  border-radius: 24px;
                }
              }
            }
          }
          .card-item:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
</style>
